<template>
  <ElCard shadow="never">
    <div id="printContainer">
      <p>print-js - 我是打印区域</p>
    </div>
    <div id="printMe" ref="printContent">
      <div class="hammer">
        <h3>黄山市机动车排放维修治理（M）站竣工出厂合格证</h3>
      </div>
      <!-- //内容 -->
      <div class="trail">
        <p>该车经我站治理维护，准予出厂。</p>
      </div>
    </div>
    <el-button type="primary" @click="dayin">print-js打印</el-button>
    <el-button type="primary" @click="dialogVisible" v-print="printNb"
      >print-nb打印</el-button
    >
  </ElCard>
</template>

<script setup lang="ts">
import printJS from 'print-js'

const printNb = {
  id: 'printMe',
  popTitle: '配置页眉标题', // 打印配置页上方的标题
  extraHead: '这是打印标题', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: true, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口！')
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log('已经加载完预览窗口，预览打开了！')
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback() {
    console.log('执行打印了！')
  }, // 调用打印时的callback
  closeCallback() {
    console.log('关闭了打印工具！')
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log('点击v-print绑定的按钮了！')
  },
  // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
  // asyncUrl (reslove) {
  //   setTimeout(() => {
  //     reslove('http://localhost:8080/')
  //   }, 2000)
  // },
  standard: '',
  extarCss: ''
}

const dayin = () => {
  printJS({
    printable: 'printContainer', // 标签元素id
    type: 'html',
    header: 'Multiple Images',
    targetStyles: ['*']
    // style
  })
  //各个配置项
  //printable:要打印的id。
  //type:可以是 html 、pdf、 json 等。
  //header: 用于HTML，Image或JSON打印的可选标头。它将放在页面顶部。此属性将接受文本或原始HTML
  //headerStyle: 要应用于标题文本的可选标题样式
  //properties:是打印json时所需要的数据属性。
  //gridHeaderStyle和gridStyle都是打印json时可选的样式。
  //repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。
  //scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果
  //targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
  //style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。
  //ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用
}
</script>
<style media="print">
@page {
  size: landscape;
  margin: 0em 0em;
  margin-top: 3em;
  margin-bottom: 5.5em;
}
@-moz-document url-prefix() {
  @page {
    size: landscape;
    margin: 0em 0;
    margin-top: 3em;
    margin-bottom: 4em;
  }
}
html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
.page {
  overflow: visible !important;
}
</style>

<style scoped></style>
